import React from 'react';
import { inject, observer } from 'mobx-react';
import { Spin, Button, Icon, Popover, Modal } from 'antd'
import { WeaSelect, WeaTableEditable, WeaRichText, WeaUpload, WeaSearchGroup, WeaNewScroll, WeaTop, WeaTextarea, WeaBrowser, WeaAlertPage, WeaPopoverHrm } from 'ecCom';
import * as Util from '../../util/Util.js';
import PlanDetailDemo from './PlanDetailDemo';

const toJS = mobx.toJS;
const { confirm } = Modal;
const ButtonGroup = Button.Group;

@observer
export default class PlanViewDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewHeight: this.getHeight(),
      yearDatas:[],
      visible:false,
      vli:1,
      summaryoutColumns:[
        {
            title: <span>分类</span>,
            dataIndex: 'cate',
            key: 'cate',
            width: '20%',
            com: [
              {
                type: 'CUSTOM',
                key: 'cate',
                render: (text, record, index, onEdit) => (
                  <div>{text}</div>
                )
              }
            ],
        },
        {
            title: <span>标题</span>,
            dataIndex: 'title',
            key: 'title',
            width: '30%',
            com:  [
                {
                  type: 'CUSTOM',
                  key: 'title',
                  render: (text, record, index, onEdit) => (
                    <div>{text}</div>
                  )
                }
              ],
        },
        {
          title: <span>实际开始时间</span>,
          dataIndex: 'beginDate',
          key: 'beginDate',
          width: '20%',
          com:  [
              {
                type: 'CUSTOM',
                key: 'beginDate',
                render: (text, record, index, onEdit) => (
                  <div>{text}</div>
                )
              }
            ],
      },
      {
        title: <span>实际结束时间</span>,
        dataIndex: 'endDate',
        key: 'endDate',
        width: '20%',
        com:  [
            {
              type: 'CUSTOM',
              key: 'endDate',
              render: (text, record, index, onEdit) => (
                <div>{text}</div>
              )
            }
          ],
      },
    ],
    summaryout:[{"id":1,"endDate":"2019-01-04","beginDate":"2019-01-04","title":"这个月计划1","cate":"这个月计划1分类"}],
    planlist:[],
    _type:1
    }
  }

  componentWillMount() {//一些初始化请求
     let ydatas = [];
     for(let i=2013;i<2020;i++){
      ydatas.push({key: i,showname: i,selected: false});
     }
     this.setState({yearDatas:ydatas});
  }

  getHeight() {
    return window.innerHeight - 40;
  }
  //添加一行表格数据
  willAdd(datas, addData, type) {
    this.setState({visible:true,_type:type});
  }
  //删除表格数据
  willDelete(datas, keys, type) {
    let{summaryout,planlist} = this.state;
    new Promise((resolve, reject) => {
      confirm({
        content: `确认删除已选择的数据行吗? `,
        onOk: () => {
          resolve(true);
          if(type=="planlist"){
            let _planlist = planlist;
            _planlist.map((element, index) => {
              for (let i = 0; i < keys.length; i++) {
                if (element.id == keys[i]) {
                  planlist.splice(index,1);
                }
              }
            })
            this.setState({planlist:planlist});
          }else{
            let _summaryout = summaryout;
            _summaryout.map((element, index) => {
              for (let i = 0; i < keys.length; i++) {
                if (element.id == keys[i]) {
                  summaryout.splice(index,1);
                }
              }
            })
            this.setState({summaryout:summaryout});
          }
        },
        onCancel: () => {
          resolve(false);
        },
      })
    })
  }
  willCopy(datas, selectedKeys, copyDatas, type) {
    let{summaryout,planlist} = this.state;
    if(type=="planlist"){
      planlist = datas;
      this.setState({planlist:planlist});
    }else{
      summaryout = datas;
      this.setState({summaryout:summaryout});
    }
  }
  closeDia(){
    let{summaryout,vli,_type,planlist} = this.state;
    vli = vli+1;
    if(_type=="planlist"){
      planlist.push({"id":vli,"endDate":"2019-02-04","beginDate":"2019-02-04","title":"这个月计划"+vli,"cate":"这个月计划"+vli+"分类"});
      this.setState({visible:false,planlist:planlist,vli:vli});
    }else{
      summaryout.push({"id":vli,"endDate":"2019-02-04","beginDate":"2019-02-04","title":"这个月计划"+vli,"cate":"这个月计划"+vli+"分类"});
      this.setState({visible:false,summaryout:summaryout,vli:vli});
    }
  }
  render() {
    const{viewHeight,yearDatas,summaryoutColumns,summaryout,planlist,visible} = this.state;
    return (
      <div className="workrelate-plan-main">
        {/* <Spin spinning={spinning}> */}
          <WeaNewScroll height={viewHeight} style={{ padding: '10px' }}>
            <WeaSelect options={yearDatas} value={"2019"} viewAttr={2} style={{width:80,marginRight:10}}/>
            <ButtonGroup>
              <Button type='ghost'>周报</Button>
              <Button type='primary'>月报</Button>
            </ButtonGroup>
            <span>
            <span className="selectcontent"><Icon type="left" className={'cursorPointer'} /><span className="selectcontent-span" id="planTypeSpan">4月</span><Icon className={'cursorPointer'}  type="right" /></span>
            </span>
            <span className="user-span"><WeaPopoverHrm /><a href='javaScript:void(0)' onClick={e => { openhrm(3); window.pointerXY(e) }} title="杨文元" >杨文元</a><span className="plan-type">工作计划报告</span></span>
            <div className="topContain-right">
            <span className="plan-type">
            <Button className="plan-type" title="保存为草稿" onClick={() => this.doSave()}>保存</Button><Button className="plan-type" onClick={() => this.doSubmit()} title="保存并提交">提交</Button>
            </span></div>
            <div className="summary-contain" style={{marginTop:5}}>
                <WeaSearchGroup style={{ paddingLeft: '0px', paddingRight: '5px' }} showGroup={true} title="2019年4月工作总结">
                    <WeaSearchGroup title='计划内' showGroup={true}  >
                      <WeaTableEditable
                        ref='tableEditPo'
                        buttonsType='inline'
                        showTitle={true}
                        columns={summaryoutColumns}
                        datas={toJS(summaryout)}
                        willAdd={(datas, addData) => this.willAdd(datas, addData, "summaryout")}
                        willDelete={(datas, keys) => this.willDelete(datas, keys, "summaryout")}
                        willEdit={(datas, result) => this.willEdit(datas, result, "summaryout")}
                        willCopy={(datas, selectedKeys, copyDatas) => this.willCopy(datas, selectedKeys, copyDatas, "summaryout")}
                      />
                    </WeaSearchGroup>
                    <WeaSearchGroup title='工作总体分析' showGroup={true} >
          
                        <WeaRichText
                          ckConfig={{
                            toolbar: [
                              { name: 'document', items: ['Source'] },
                              { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList'] },
                              { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                              { name: 'colors', items: ['TextColor'] },
                              { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike',] },
                              { name: 'insert', items: ['Image', 'Table', 'Smiley'] }
                            ],
                            height: 200,
                            autoGrow_minHeight: 200,
                            autoGrow_maxHeight: 200,
                            uploadUrl: '/api/develop/docs/uploadimage',
                            resize_enabled: false,
                          }}
                          extentsConfig
                          onToolsChange={(name, ids, list, type) => this.transfStr(name, ids, list, type)}
                        />
                    </WeaSearchGroup>
                </WeaSearchGroup>
                <WeaSearchGroup style={{ paddingLeft: '0px', paddingRight: '5px' }} showGroup={true} title="2019年5月工作计划" >
                  <WeaTableEditable
                    ref='tableEditP'
                    buttonsType='inline'
                    showTitle={true}
                    columns={summaryoutColumns}
                    datas={toJS(planlist)}
                    willAdd={(datas, addData) => this.willAdd(datas, addData, "planlist")}
                    willDelete={(datas, keys) => this.willDelete(datas, keys, "planlist")}
                    willEdit={(datas, result) => this.willEdit(datas, result, "planlist")}
                    willCopy={(datas, selectedKeys, copyDatas) => this.willCopy(datas, selectedKeys, copyDatas, "planlist")}
                  />
                </WeaSearchGroup>
                <div className="summary-title" style={{ clear: 'both', paddingTop: '65px' }}>
                  <div style={{ width: '49%', float: 'left' }}>
                    <WeaTop
                      title={<span>相关附件</span>}
                      icon={<i className='icon-coms-currency-Enclosure' />}
                      iconBgcolor='#0080FF'
                    />
                    <div className="tag-content">
                     <WeaUpload
                        uploadUrl={'/api/workrelate/common/uploadDoc?category='}
                        category={''}
                        maxUploadSize={5}
                        viewAttr='1'
                        showClearAll={false}
                        onChange={(ids, list) => this.uploadChange(ids, list)}
                      />
                    </div>
                  </div>
                  
                    <div style={{ width: '49%', float: 'right' }}>
                      <WeaTop
                        title={<span>绩效考核</span>}
                        icon={<i className='icon-coms-link' />}
                        iconBgcolor='#FF00FF'
                      />
                      <div className="tag-content">
                        <span className="tag-contentHref"><a href="##" target="_blank">杨文元2019年4月目标绩效考核</a></span>
                      </div>
                    </div>
                </div>
            </div>
          </WeaNewScroll>
          <PlanDetailDemo canedit={true} visible={visible} onClose={() => this.closeDia()} />
        {/* </Spin> */}
      </div>
    )
  }
};